<template>
  <transition name="slide-up">
    <div class="head" v-show="showHead">
      <div class="fileName">
        <span class="logo"></span>
        <span class="name" :title="curName">{{curName}}</span>
      </div>
      <div class="headBtn" v-show="!history.showVersionInfo">
        <span v-show="componentInfoHeader.abandon" class="saveBtn" @click="backdownMedal">重新认证</span>
        <span class="saveBtn" @click="save">保存</span>
        <span v-show="componentInfoHeader.repulse" class="saveBtn warnBtn" @click="repulseMark">打回</span>
        <span v-show="!componentInfoHeader.recheck" class="saveBtn submitBtn" @click="submit">提交</span>
      </div>
      <div class="headBtn" v-show="history.showVersionInfo">
        <span class="saveBtn" @click="closeVersion">返回</span>
        <span class="saveBtn submitBtn" @click="recoverVersion">恢复到该版本</span>
      </div>
      <div class="info">
        <span class="history theme" v-if="componentInfoHeader.theme" @click="changeTheme"></span>
        <span class="shortcut cut" v-if="componentInfoHeader.shortcut">
          快捷键
          <b style="margin-left: 10px;color: #e2e2e2;">|</b>
          <div class="showBox" style="color: #000;">
            <div class="table">
              <div v-for="item in shortcutkeys" :key="item.key">
                <span v-html="item.key"></span>
                <span>
                  <i v-html="item.value"></i>
                </span>
              </div>
            </div>
          </div>
        </span>
        <span class="shortcut rule" v-if="componentInfoHeader.standard">
          标注规范
          <b style="margin-left: 10px;color: #e2e2e2;">|</b>
          <div class="showBox">
            <div class="box" v-html="standard"></div>
          </div>
        </span>
        <span class="history" @click="showHistory" v-if="componentInfoHeader.history">历史</span>
      </div>
      <i style="margin-top:5px;float:right;cursor:pointer;" @click="robot()">
        <img style="display:inline-block;" src="/assstatic/images/客服.svg" alt />
      </i>
    </div>
  </transition>
</template>
<script>
export default {
    name:'Header',
    data(){
        return{}
    },
    props: ['showHead', 'curName', 'standard', 'shortcutkeys','history','componentInfoHeader','repulse','abandon','backdown'],
    created: function () {

    },
    methods: {
        robot:function(){
            var url = '/open/robot';
            window.open(url)
        },
        save: function () {
            this.$emit('save')
        },
        submit: function () {
            this.$emit('submit')
        },
        showHistory: function () {
            this.$emit('showHistory')
        },
        changeTheme:function(){
            this.$emit('changeTheme')
        },
        closeVersion:function(){
            this.$emit('closeVersion')
        },
        recoverVersion:function(){
            this.$emit('recoverVersion')
        },
        repulseMark:function(){
            this.$emit('repulseMark')
        },
        backdownMedal:function(){
            this.$emit('backdown')
        },
    }
}
</script>